import React from 'react'
import { Button, Table, Form, Modal, Input, message } from 'antd'
import http from '../../../service/http';
export default function Classification() {
  const [data, setData] = React.useState({});
  const [page, setPage] = React.useState(1);
  const [EditVisible, setEditVisible] = React.useState(false);
  function getPageClass(page, pageSize) {
    http.getPageClass({ pageNum: page, pageSize: pageSize }).then((res) => {
      if (res.code !== 200) return
      setData(res.data)
    })
  }
  React.useEffect(() => {
    getPageClass(page, 8)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const columns = [
    {
      title: '类目编号',
      dataIndex: 'id',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '类目名称',
      dataIndex: 'name',
      ellipsis: true,
      align: 'center',
    },
  ];
  return (
    <div style={{ padding: '0 100px' }}>
      <div style={{ fontSize: '20px', fontWeight: '800' }}>菜品类目</div>
      <div style={{ height: '32px', padding: '16px 0', boxSizing: 'content-box' }}>
        <Button style={{ float: 'right' }} type='primary' onClick={() => {
          setEditVisible(true)
        }}>添加类目</Button>
      </div>
      <Table rowKey='id'
        columns={columns}
        dataSource={data.records}
        bordered
        pagination={
          {
            pageSize: 8,
            total: data.pages,
            onChange: (pageNum, pageSize) => {
              setPage(pageNum)
              getPageClass(page, pageSize)
            }
          }
        }
      />
      <Edit visible={EditVisible}
        close={() => { setEditVisible(false) }}
        getPageClass={getPageClass}
        page={page}
      />
    </div>
  )
}
function Edit(props) {
  const [editFrom] = Form.useForm()
  React.useEffect(() => {
    if (props.visible) {
      editFrom.resetFields()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.visible])
  return (
    <div>
      <Modal visible={props.visible} onCancel={() => { props.close() }}
        forceRender
        okText='确定'
        title='增加类目菜品'
        cancelText='取消'
        onOk={async () => {
          try {
            let fieldsValue = await editFrom.validateFields()
            http.addClass(fieldsValue).then((res) => {
              if (res.code !== 200) return
              props.close()
              editFrom.resetFields()
              props.getPageClass(props.page, 8)
              message.success('添加成功')
            })
          }
          catch {
            message.error('添加失败')
          }
        }}
      >
        <Form
          layout="horizontal"
          form={editFrom}
          name="editForm"
        >
          <Form.Item
            name="name"
            label="类目名称"
            rules={[
              {
                min: 2,
                message: '请输入大于等于2个字符！',
              },
              {
                required: true,
                message: '请输入类目名称',
              },
            ]}
          >
            <Input placeholder='名称' />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
